/**
 *  学习目标：Todos 案例
 * /*
  学习目标： 案例
  需求1. ✅组件拆分
    1.1 Header Main Footer
  需求2. ✅渲染列表
  需求3. ✅更新数据
  需求4. ✅删除一条数据功能
  需求5. 剩余任务的功能
  需求6. ✅Header改造为受控组件
  需求7. 回车新增功能
  需求7. ✅回车新增功能
*/

import React from 'react';
import './styles/base.css';
import './styles/index.css';

export default class App extends React.Component {
  state = {
    list: [
      {
        task: '学习react',
        isDone: false,
        id: 1,
      },
      {
        task: '放屁',
        isDone: true,
        id: 2,
      },
    ],
  };
  handleAdd = (task) => {
    let newList = this.state.list.slice();
    newList.push({
      task,
      isDone: false,
      id: Date.now(),
    });
    this.setState({
      list: newList,
    });
  };
  handledelbyid = (id) => {
    console.log('id  ----->  ', id);
    const newList = this.state.list.filter((item) => {
      if (item.id !== id) return item;
    });
    this.setState({
      list: newList,
    });
  };
  handleUpdate = (id) => {
    const newList = this.state.list.map((item) => {
      return {
        ...item,
        isDone: id === item.id ? !item.isDone : item.isDone,
      };
    });
    this.setState({
      list: newList,
    });
  };

  render() {
    const isAll = this.state.list.length
      ? this.state.list.every((item) => {
          return item.isDone;
        })
      : false;
    console.log('isAll  ----->  ', isAll);
    return (
      <section className="todoapp">
        {/* 头部 */}
        <Header handleAdd={this.handleAdd}></Header>
        {/* 主体 */}
        {/* 2.2 通过父传子技术，传list给Main组件 */}
        {/* 💥在React中不需要先定义props，可以直接使用 */}

        {/* 4.2 父传子回调函数 */}
        {/* 主体 */}
        {/* 通过父传子 */}
        <Main
          list={this.state.list}
          handleUpdate={this.handleUpdate}
          handledelbyid={this.handledelbyid}
          isAll={isAll}
        ></Main>
        {/* 底部 */}
        <Footer></Footer>
      </section>
    );
  }
}
class Header extends React.Component {
  state = {
    task: '',
  };
  handleChange = (e) => {
    this.setState({
      task: e.target.value,
    });
  };
  // 7.4 触发新增的handleAdd函数
  handleKeyDowm = (e) => {
    // 判断是否为回车键
    if (e.keyCode === 13) {
      // 7.4 触发新增的handleAdd函数
      this.props.handleAdd(e.target.value);
    }
  };
  render() {
    const { task } = this.state;
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="需要做什么"
          autoFocus
          value={task}
          onChange={this.handleChange}
          onKeyDown={this.handleKeyDowm}
        />
      </header>
    );
  }
}
class Main extends React.Component {
  // /  2.3 结构props得到list，遍历list渲染时生成多个li
  render() {
    const { list, handleUpdate, handledelbyid, isAll } = this.props;
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={isAll}
        />
        <label htmlFor="toggle-all">全选</label>
        <ul className="todo-list">
          {/* 列表渲染 */}
          {list.map((item) => (
            // 三元运算符控制class属性
            <li className={item.isDone ? 'completed' : ''} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  onChange={() => {
                    handleUpdate(item.id);
                  }}
                />
                <label>{item.task}</label>
                <button
                  className="destroy"
                  onClick={() => handledelbyid(item.id)}
                ></button>
              </div>
            </li>
          ))}
        </ul>
      </section>
    );
  }
}
class Footer extends React.Component {
  render() {
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>1</strong> 剩余
        </span>
        <ul className="filters">
          <li>
            <a className="all selected" href="#/">
              全部
            </a>
          </li>
          <li>
            <a className="active" href="#/active">
              未完成
            </a>
          </li>
          <li>
            <a className="completed" href="#/completed">
              已完成
            </a>
          </li>
        </ul>
        <button className="clear-completed">清除已完成</button>
      </footer>
    );
  }
}
